import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:sports_new/controller/team/soccer/zq_team_detail_logic.dart';
import 'package:sports_new/resources/colours.dart';
import 'package:sports_new/resources/styles.dart';
import 'package:sports_new/utils/utils.dart';
import 'package:sports_new/view/team/items/team_focus_button.dart';

import '../../../widgets/base/qkd_text.dart';

class ZqTeamDetailPage extends StatefulWidget {
  const ZqTeamDetailPage({super.key});

  @override
  State<ZqTeamDetailPage> createState() => _ZqTeamDetailPageState();
}

class _ZqTeamDetailPageState extends State<ZqTeamDetailPage>
    with TickerProviderStateMixin {
  int teamId = Get.arguments;
  ZqTeamDetailLogic logic =
      Get.put(ZqTeamDetailLogic(), tag: '${Get.arguments}');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      primary: false,
      body: GetBuilder<ZqTeamDetailLogic>(
        tag: teamId.toString(),
        builder: (controller) {
          return Stack(
            children: [
              Column(
                children: [header(), body()],
              ),
              Positioned(
                top: 0,
                left: 0,
                right: 0,
                child: Styles.appBar(
                  systemUiOverlayStyle: const SystemUiOverlayStyle(
                    statusBarIconBrightness: Brightness.light
                  ),
                  backgroundColor: Colours.transparent,
                  leadingColor: Colours.white
                )
              ),
            ],
          );
        }
      ),
    );
  }

  header() {
    return Container(
        width: Get.width,
        padding: EdgeInsets.only(
          top: MediaQuery.of(context).padding.top + kToolbarHeight
        ),
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage(Utils.getImgPath('team_header.png')),
            alignment: Alignment.bottomCenter,
            fit: BoxFit.cover
          )
        ),
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.only(left: 24, right: 30),
              child: Row(
                children: [
                  logic.data?.logo == null
                      ? Styles.placeholderIcon(width: 54, height: 54)
                      : CachedNetworkImage(
                          imageUrl: logic.data?.logo ?? '',
                          width: 60,
                          height: 60,
                          fit: BoxFit.contain,
                          placeholder: (context, url) =>
                              Styles.placeholderIcon(),
                          errorWidget: (context, url, error) => Image.asset(
                            Utils.getImgPath("zq_placeholder.png"),
                            fit: BoxFit.fitWidth,
                          ),
                        ),
                  const SizedBox(width: 12),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      QkdText(logic.data?.nameChs ?? "",
                        color: Colours.white,
                        fontSize: 20,
                        fontWeight: FontWeight.w500
                      ),
                      QkdText(logic.data?.nameEn ?? "",
                        color: Colours.white.withOpacity(0.8)
                      ),
                    ],
                  ),
                  const Spacer(),
                  TeamFocusButton.soccer(
                    id: logic.id,
                    isFocus: logic.data?.isFocus == 1,
                    teamName: logic.data?.nameChsShort,
                    onTap: (value) {
                      logic.getData();
                      Utils.onEvent(
                        "data_match_team_follow",
                        params: {"event_id": logic.id, "follow": value}
                      );
                    },
                  )
                ],
              ),
            ),
            const SizedBox(height: 28),
            Row(
              mainAxisSize: MainAxisSize.max,
              children: [
                Flexible(
                    fit: FlexFit.tight,
                    child: Column(
                      children: [
                        QkdText(
                          logic.data?.rankName ?? '-',
                          color: Colours.white,
                          needCenter: true,
                        ),
                        const SizedBox(height: 4),
                        QkdText(
                          logic.data?.rankLeagueName ?? '-',
                          color: Colours.white.withOpacity(0.6),
                          fontSize: 10,
                          needCenter: true,
                        )
                      ],
                    )),
                Container(
                    width: 0.5,
                    height: 24,
                    color: Colours.white.withOpacity(0.2)),
                Flexible(
                    fit: FlexFit.tight,
                    child: Column(
                      children: [
                        QkdText(
                          logic.getRecentStatus() ?? '',
                          color: Colours.white,
                          needCenter: true,
                        ),
                        const SizedBox(height: 4),
                        QkdText(
                          '近期状态',
                          color: Colours.white.withOpacity(0.6),
                          fontSize: 10,
                          needCenter: true,
                        )
                      ],
                    ))
              ],
            ),
            const SizedBox(height: 20),
          ],
        ));
  }

  body() {
    return Expanded(
      child: Container(
        color: const Color(0xFF313545),
        child: Container(
          clipBehavior: Clip.antiAlias,
          decoration: const BoxDecoration(
            color: Colours.white,
            borderRadius: BorderRadius.only(
                topRight: Radius.circular(10), topLeft: Radius.circular(10))),
            child: Column(
              children: [
                SizedBox(
                  height: 40,
                  child: Styles.tabbar(
                    tabs: logic.tabs.map((f) => QkdText(f)).toList(),
                    // labelPadding: EdgeInsets.symmetric(vertical: 9),
                    controller: logic.tabController,
                    onTap: (value) {
                      Utils.onEvent('sjpd_qdxq', params: {'sjpd_qdxq': '$value'});
                      // controller.currentIndex = value;
                    },
                    fontSize: 16,
                    // labelPadding: const EdgeInsets.symmetric(horizontal: 13),
                    scrollable: false),
                ),
                Expanded(
                  child: TabBarView(
                    controller: logic.tabController,
                    children: List.generate(
                      logic.tabs.length,
                      (index) => logic.pages[index])
                  )
                )
              ]
            )
        ),
      ),
    );
  }
}
